---
title: Next.js
description: API Authentication in Next.js
mode: "wide"
---

## Prerequisites

- Created your [Unkey account](https://app.unkey.com/auth/sign-up)
- Created an API in the [Unkey dashboard](https://app.unkey.com/apis)

<Card title="Skip the tutorial">
  We also have a [Next.js example](https://github.com/unkeyed/examples/tree/main/nextjs) ready to deploy on Vercel.

    [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Funkeyed%2Funkey%2Ftree%2Fmain%2Fexamples%2Fnextjs&project-name=unkey-with-nextjs&repository-name=unkey-with-nextjs&integration-ids=oac_D84Ib6K2pS6CDQXxQbzsYxsh)

</Card>

<Steps titleSize="h3">

<Step title="Create Next.js Application">
Run the following command to init your Next.js project

<CodeGroup>

```bash npm
npx create-next-app@latest
```

```bash pnpm
pnpm create next-app@latest
```

```bash yarn
yarn create-next-app@latest
```

```bash bun
bunx create-next-app
```

</CodeGroup>

</Step>
<Step title="Install">

Now install the `@unkey/nextjs` package

<CodeGroup>

```bash npm
npm install @unkey/nextjs
```

```bash pnpm
pnpm add @unkey/nextjs
```

```bash yarn
yarn add @unkey/nextjs
```

```bash bun
bun install @unkey/nextjs
```

</CodeGroup>

</Step>

<Step  title="Creating a protected route">

Create a new route and add the following code

```ts /app/protected/route.ts
import { NextRequestWithUnkeyContext, withUnkey } from "@unkey/nextjs";

export const POST = withUnkey(
  async (req: NextRequestWithUnkeyContext) => {
    // Process the request here
    // You have access to the verification response using `req.unkey`
    console.log(req.unkey);

    return new Response("Your API key is valid!");
  },
  { rootKey: process.env.UNKEY_ROOT_KEY! }
);
```

</Step>

<Step title="Running it">

<CodeGroup>

```bash npm
npm run dev
```

```bash pnpm
pnpm run dev
```

```bash yarn
yarn run dev
```

```bash bun
bun run dev
```

</CodeGroup>

</Step>

<Step  title="Try it out">

Go to https://app.unkey.com and create a new key. Then verify it with our new server:

```bash
curl -XPOST 'http://localhost:3000/protected' \
  -H "Authorization: Bearer <KEY>"
```

It should return `"Your API key is valid!"` and log out the following. 

```bash
{
    meta: { requestId: 'req_id' }, 
    data: {
        valid: true,
        code: 'VALID',
        keyId: 'key_id',
        enabled: true
    }
}
``` 
  
Log may potentially have more information about the key, depending on what you set up in the dashboard.

</Step>

</Steps>

## What is next?

Now that you've seen the power of Unkey, check out some resources below to continue your journey.

<CardGroup cols={3}>
  <Card title="Discord" icon="discord" href="https://unkey.com/discord">Join our Discord to chat with us and the community</Card>
  <Card title="Unkey API Reference" icon="database" href="/api-reference">
     Learn about our API that helps you manage APIs, keys, ratelimits and analytical data.
  </Card>
  <Card title="Next.js SDK" icon="brackets-curly" href="/libraries/ts/nextjs">
   Check out our Next.js SDK and how they fit into your Next application.
  </Card>
</CardGroup>
